<template>
  <!-- <page-meta page-style="overflow:hidden"></page-meta> -->
  <page-meta
    :page-style="'overflow:' + (searchLink? 'hidden' : 'visible')"
  ></page-meta>
 <view>
	 
	 <view style="background-color: #181816; height: 100%; min-height: 100vh;overflow: hidden;">
	   <!-- 头部 -->
	   <view class="header">
	     <view class="header_bg">
	       <image src="../../static/bg.png"></image>
	     </view>
	     <view class="header_title">
	       <text>我的</text>
	       <!-- 头部页面指引和消息 -->
	       <view class="header_nav">
	         <view class="nft_search">
	           <view class="nav_content" style="display: flex;" @click="link">
	             <image src="../../static/nft_search.png"></image>
	             <a style="line-height: 55rpx;">链上查询</a>
	           </view>
	         </view>
	         <view class="message_btn" @click="noticeCenter()">
	           <image src="../../static/message_btn.png"></image>
	         </view>
	       </view>
	     </view>
	 
	     <!-- 用户登录 -->
	     <view class="header_personal">
	       <view class="about_user">
	         <view class="customer_head" v-model="head">
	           <view class="customer-default" v-if="!userInfo.token">
	             <image src="/static/user.png" mode="scaleToFill" />
	           </view>
	           <image
	             class="customer-default"
	             @click="login()"
	             :src="head ? head : '/static/user.png'"
	             v-else
	           ></image>
	           <view
	             class="authentication"
	             @click="verfiy()"
	             v-show="authentication"
	           >
	             未认证
	           </view>
	         </view>
	         <view
	           class="login_status"
	           @click="login"
	           open-type="getUserInfo,getPhoneNumber"
	           v-model="username"
	         >
	           <view class="login" v-show="!userInfo.token">
	             <view class="login_text">请点击登录</view>
	             <view
	               class="login_notice"
	               style="font-size: 26rpx; color: #666666;"
	             >
	               登录后可查看您的数字藏品
	             </view>
	           </view>
	           <view class="username" v-show="userInfo.token">
	             {{ username ? username : '微信用户' }}
	           </view>
	         </view>
	       </view>
	 
	       <!-- <view class="verify" @click="verfiy" v-show="authentication">
	         <button>实名认证</button>
	       </view> -->
	     </view>
	   </view>
	   <!-- 内容 -->
	   <view class="content">
	     <view class="content1">
	       <u-cell-group :border="false">
	         <u-cell
	           :border="true"
	           icon="/static/MyCollection.png"
	           iconStyle="width: 38rpx;height: 37rpx;"
	           title="我的藏品"
	           :value="myCollectionNum"
	           titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
	           @click="jump('/pages/mine/My_collection')"
	           isLink
	         ></u-cell>
	         <u-cell
	           :border="false"
	           icon="/static/my_follow.png"
	           iconStyle="width: 38rpx;height: 37rpx;"
	           title="我的关注"
	           titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
	           @click="jump('/pages/mine/my_follow/my_follow')"
	           isLink
	         ></u-cell>
	       </u-cell-group>
	     </view>
	     <view class="content2">
	       <u-cell-group :border="false">
	         <u-cell
	           :border="true"
	           icon="/static/setting.png"
	           iconStyle="width: 38rpx;height: 38rpx;"
	           title="账号与安全"
	           titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
	           @click="jump('/pages/mine/userinfo')"
	           isLink
	         ></u-cell>
	         <u-cell
	           :border="false"
	           icon="/static/nft_url.png"
	           iconStyle="width: 36rpx;height: 30rpx;"
	           v-model="value"
	           :value="value"
	           title="区块链地址"
	           titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
	           @click="NFT"
	           isLink
	         ></u-cell>
	       </u-cell-group>
	     </view>
	     <view class="content3">
	       <u-cell-group :border="false">
	         <u-cell
	           :border="true"
	           icon="/static/contact.png"
	           iconStyle="width: 40rpx;height: 37rpx;"
	           @click="contact"
	           title="联系客服"
	           titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
	           isLink
	         ></u-cell>
	         <u-cell
	           :border="true"
	           icon="/static/about_us.png"
	           iconStyle="width: 40rpx;height: 37rpx;"
	           title="关于我们"
	           titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
	           url="/pages/mine/about_us/about_us"
	           isLink
	         ></u-cell>
	         <u-cell
	           @click="clearStorage()"
	           :border="false"
	           icon="/static/clear.png"
	           iconStyle="width: 39rpx;height: 38rpx;"
	           title="清除缓存"
	           titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
	           url="/pages/"
	           isLink
	         ></u-cell>
	       </u-cell-group>
	     </view>
	 
	     <!-- 至信链 -->
	     <view class="content4">
	       <image src="../../static/zxl_yde.png"></image>
	     </view>
	   </view>
	   <!-- 弹出 -->
	   <u-popup
	     :show="show"
	     :round="20"
	     @close="close"
	     @open="open"
	     mode="center"
	     safeAreaInsetBottom="false"
	     closeOnClickOverlay="true"
	   >
	     <view class="contact_us">
	       <image
	         :show-menu-by-longpress="true"
	         src="https://publish.onedaen.com/uploads/publicImg/qrcode.jpg"
	       ></image>
	       <text
	         style="
	           font-size: 30rpx;
	           color: #4d4d4d;
	           text-align: center;
	           position: absolute;
	           top: 80%;
	           left: 18%;
	         "
	       >
	         长按可添加专属客服企业微信
	       </text>
	       <view class="box-close" @click="close">
	         <image src="/static/close.png" mode="scaleToFill" />
	       </view>
	     </view>
	   </u-popup>
	   <!-- 链上查询弹出 -->
	   <u-popup
	     :show="searchLink"
	     :round="20"
	     @close="close"
	     @open="open"
	     mode="center"
	     :safeAreaInsetBottom="false"
	     :closeOnClickOverlay="true"
	   >
	     <view class="search_link">
	       <view class="header" style="text-align: center;">
	         <image
	           mode="aspectFit"
	           style="width: 490rpx; margin: auto; height: 31rpx;"
	           src="../../static/searchLink.png"
	         ></image>
	       </view>
	       <view class="content_text">
	         <p>链上查询资产方式如下：</p>
	         <p>
	           第一步:
	           打开卯时数字平台小程序「我的」页面并在页面中复制自己的至信链地址。
	         </p>
	         <p>
	           第二步: 打开「腾讯至信链区块链浏览器」的官方网站："
	           <a @click="copy('https://zxscan.qq.com')">https://zxscan.qq.com</a>
	           "，并在搜索栏中粘贴自己刚刚复制的至信链账户地址，点击搜索。
	         </p>
	         <p>
	           第三步:
	           在搜索出来的数据中，找到自己的领取记录，「IN」代表转入自己账户的记录，即您在卯时数字平台领取的数字藏品记录。「从」则是官方地址，「到」则是自己的至信链账户地址。
	         </p>
	         <p>
	           第四步:
	           如果想查询已领取的数字藏品详细信息便可以点击左侧的“资产列表”进行查询。点击藏品ID即可查询到有关该藏品的所有详细记录。需要注意的是，部分类型数字藏品的铸造需要一定的时间，可在领取后1~2天再进行查询。
	         </p>
	         <p>
	           第五步:
	           如需保存藏品主文件，请在我的藏品中复制藏品ID，然后在至信链浏览器中搜索NFT
	           ID（藏品ID）查询或在资产列表中点击交易哈希中的NFT
	           ID，随后点击作品URL获取。
	         </p>
	       </view>
	       <view class="close_btn" @click="close()">
	         <view>关闭</view>
	       </view>
	     </view>
	   </u-popup>
	 </view>
 </view>
  
</template>

<script>
import api from '@/request/api.js'
export default {
  data() {
    return {
      hasLogin: false,
      statusBarHeight: 0,
      titleBarHeight: 0,
      show: false,
      /* 链上查询弹窗 */
      searchLink: false,
      head: 'https://publish.onedaen.com/uploads/static/login_head.png',
      username: '',
      authentication: true,
      myCollectionNum: '',
      is_auth: '',
      value: '',
      userInfo: '',
    }
  },
  onReady() {
    this.verifyLogin()
    const info = uni.getStorageSync('userInfo')
    this.userInfo = info
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
  },
  onShow() {
    this.verifyLogin()
    const info = uni.getStorageSync('userInfo')
    this.userInfo = info
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
  },
  onLoad() {
    this.init()

    this.verifyLogin()
    const info = uni.getStorageSync('userInfo')
	console.log(info)
    this.userInfo = info
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
  },
  methods: {
    async init() {
      const info = await api.myCollection({
        page: 1,
      })
      this.myCollectionNum = info.data.total
    },

    /* 遮罩 */
    close() {
      this.show = false
      this.searchLink = false
    },
    open() {},
    async getPhoneNumber(e) {
      console.log(e)
    },
    // 跳转页面
    jump(url) {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        uni.showModal({
          title: '请登录后查看,是否立即登录',
          success: (res) => {
            console.log('res', res)
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login',
              })
            }
          },
        })
        return
      }
      uni.navigateTo({
        url,
      })
    },
    // 复制到剪切板
    copy(text) {
      uni.setClipboardData({
        data: text,
        success: (res) => {
          uni.showToast({
            title: '已复制到剪切板',
            icon: 'none',
          })
        },
      })
    },
    /* 消息中心 */
    noticeCenter() {
      uni.navigateTo({
        url: '../message/notice',
      })
    },
    /* 登录 */
    login() {
      const info = uni.getStorageSync('userInfo')

      uni.navigateTo({
        url: info.token ? '/pages/mine/userinfo' : '../login/login',
      })
    },
    /* 实名认证 */
    verfiy() {
      uni.navigateTo({
        url: '../verify/verify',
      })
    },
    /* 验证登录状态和实名认证 */
    verifyLogin() {
      /* 验证是否登录 */
      let hasLogin = uni.getStorageSync('hasLogin')
      this.hasLogin = hasLogin
      console.log(this.hasLogin)
      if (this.hasLogin == true) {
        uni.getStorage({
          key: 'userInfo',
          success: (res) => {
            console.log(res)
            this.head = res.data.avatarUrl
            this.username = res.data.nickName
            this.hasLogin = res.data.hasLogin
            this.is_auth = res.data.is_auth
            if (res.data.is_auth == 1) {
              this.authentication = true
            } else {
              this.authentication = false
            }
          },
        })
      } else {
        // 未登录
        this.authentication = false
      }
    },
    /* 链上查询 */
    link() {
      this.searchLink = true
    },
    /* 区块链信息 */
    NFT() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        uni.showModal({
          title: '请登录后查看,是否立即登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login',
              })
            }
          },
        })
        return
      }
      let is_auth = this.is_auth
      /* 显示是否实名认证 */
      /* 判断实名认证信息 */
      if (is_auth == 1) {
        this.value = '未认证'
        uni.navigateTo({
          url: '../verify/verify',
        })
      } else if (is_auth == 2) {
        uni.navigateTo({
          url: '../verify/verify_success',
        })
      } else {
        uni.navigateTo({
          url: '../verify/verify',
        })
      }
    },
    /* 联系客服 */
    contact() {
      this.show = true
    },
    // 识别二维码
    checkImg() {
      uni.previewImage({
        urls: ['https://publish.onedaen.com/uploads/publicImg/qrcode.jpg'],
        longPressActions: '长按识别',
        success: (result) => {},
        fail: (error) => {},
      })
    },
	// 退出登录
	logout() {
	  uni.removeStorage({
	    key: 'userInfo',
	    success: function (res) {
	      uni.setStorageSync('hasLogin', false)
	      setTimeout(() => {
	        uni.reLaunch(
	          {
	            url: 'mine',
	          },
	          1000,
	        )
	      })
	    },
	  })
	},
    /* 清除缓存 */
    getStorageSize() {
      let that = this
      uni.getStorageInfo({
        success(res) {
          console.log(res)
          console.log(res.keys)
          console.log(res.limitSize)
          let size = res.currentSize
          if (size < 1024) {
            that.storageSize = size + ' B'
          } else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
            that.storageSize = Math.floor((size / 1024) * 100) / 100 + ' KB'
          } else if (size / 1024 / 1024 >= 1) {
            that.storageSize =
              Math.floor((size / 1024 / 1024) * 100) / 100 + ' M'
          }
        },
      })
    },
    clearStorage() {
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定清除缓存吗?',
        confirmText: '立即清除',
        success:(res)=> {
          if (res.confirm) {
			this.logout()
            uni.clearStorageSync()
            //重新获取并显示清除后的缓存大小
            that.getStorageSize()
            uni.showToast({
              title: '清除成功',
            })
          }
        },
      })
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
  min-height: 100vh;
  background-color: #181816;
}

* {
  color: #ffffff;
}

.header {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  .header_bg {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .header_title {
    position: relative;
    width: 100%;
    height: 130rpx;
    text-align: center;
    margin-top: 120rpx;
    line-height: 18rpx;
    z-index: 5;

    text {
      font-family: PingFang-SC-Regular;
      font-size: 34rpx;
      letter-spacing: 0rpx;
      font-weight: bold;
      color: #ffffff;
    }

    .header_nav {
      position: absolute;
      display: flex;
      justify-content: space-between;
      top: 80rpx;
      width: 95%;
      right: 5%;
      height: 60rpx;
      z-index: 5;

      .nft_search {
        // min-width: 180rpx;
        // max-width: 220rpx;

        height: 57rpx;
        padding: 0 18rpx 0 16rpx;
        background-color: rgba(128, 128, 128, 0.15);
        border-radius: 0rpx 28rpx 28rpx 0rpx;

        .nav_content {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          text-align: left;
          color: #54fefd;
          line-height: 60rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            // margin: 12rpx 20rpx;
            margin-right: 18rpx;
          }
        }
      }

      .message_btn {
        width: 42rpx;
        height: 42rpx;
        margin: 9rpx 0;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .header_personal {
    width: 685rpx;
    margin: 60rpx auto;
    display: flex;
    z-index: 5;
    position: relative;

    .about_user {
      display: flex;
      align-items: center;
      width: 100%;
    }
    .customer_head {
      width: 158rpx;
      height: 158rpx;
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      .customer-default {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #494949;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 50rpx;
          height: 50rpx;
        }
      }
      image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
      .authentication {
        position: absolute;
        bottom: -20rpx;
        width: 120rpx;
        border-radius: 19.5rpx;
        font-size: 24rpx;
        height: 39rpx;
        line-height: 39rpx;
        background-color: #ed4747;
        color: #fff;
        text-align: center;
        vertical-align: middle;
      }
    }

    .login_status {
      color: #ffffff;
      .login {
        margin-left: 32rpx;
      }
      // line-height: 60rpx;
      // margin: 20rpx 10rpx;
      .username {
        // line-height: 130rpx;
        margin-left: 30rpx;
      }
    }

    .verify {
      // width: calc(87rpx * 2);
      // line-height: 126rpx;
      // height: 126rpx;
      position: absolute;
      bottom: 63rpx;
      right: 0;
      button {
        width: 174rpx;
        height: 46rpx;
        // margin: 63rpx;

        background-color: #d2d13e;
        border-radius: 23rpx;
        font-size: 24rpx;
        line-height: 46rpx;
        color: #181816;
        text-align: center;
      }
    }
  }
}

.content {
  width: 90%;
  margin: auto;
  font-family: PingFang-SC-Medium;
  font-size: 28rpx;

  .u-cell__title-text {
    margin-left: 15rpx;
    line-height: 80rpx !important;
  }

  .u-cell__body {
    width: 90%;
    margin: auto;
    padding: 5px 0 !important;
  }

  .content1 {
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    background-color: #242424;
  }

  .content2 {
    margin: 30rpx 0;
    border-radius: 20rpx;
    background-color: #242424;
  }

  .content3 {
    margin: 30rpx 0;
    border-radius: 20rpx;
    background-color: #242424;
  }

  .content4 {
    width: 34%;
    margin: 80rpx auto 60rpx;
    height: 48rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.contact_us {
  width: 600rpx;
  height: 600rpx;
  position: relative;

  image {
    width: 300rpx;
    height: 300rpx;
    margin: 150rpx;
  }
}
.box-close {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -30%;
  opacity: 0.5;
  image {
    width: 80rpx;
    height: 80rpx;
    margin: 0;
  }
}
.search_link {
  width: 600rpx;
  margin: auto;
  border-radius: 20rpx;
  background-color: #ffffff;
  .header {
    font-size: 33rpx;
    font-weight: 400;
    letter-spacing: 2rpx;
    padding: 30rpx 0;
    color: #1a1a1a;
    text-align: center;
  }

  .content_text {
    width: 90%;
    margin: auto;
    a {
      display: inline;
      color: #224caf;
    }
    p {
      font-size: 26rpx;
      line-height: 40rpx;
      color: #4d4d4d;
      margin: 10rpx 0;
    }
  }
  .close_btn {
    width: 167rpx;
    margin: 50rpx auto 20rpx;
    height: 65rpx;
    line-height: 60rpx;
    background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
      linear-gradient(#dcb71a, #dcb71a);
    background-blend-mode: normal, normal;
    border-radius: 32rpx;
    color: #000;
    text-align: center;
    font-size: 26rpx;
    font-weight: bold;

    // button {
    //   min-width: 150rpx;
    //   max-width: 180rpx;
    //   margin: auto;
    //   font-size: 26rpx;
    //   height: 60rpx;
    //   line-height: 60rpx;
    //   font-weight: bold;
    //   background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
    //     linear-gradient(#dcb71a, #dcb71a);
    //   background-blend-mode: normal, normal;
    //   border-radius: 32rpx;
    // }
  }
}
</style>
